<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grade Students</title>
</head>
<body>
    <h1>Grade Students</h1>
    <form method="POST">
        <label for="course">Select Course:</label>
        <select id="course" name="course">
            {% for course in courses %}
            <option value="{{ course.CourseID }}">{{ course.CourseName }}</option>
            {% endfor %}
        </select>
        <div id="students">
            {% for course in courses %}
            <div id="course-{{ course.CourseID }}" style="display: none;">
                <h2>{{ course.CourseName }}</h2>
                <ul>
                    {% for enrollment in course.enrollments %}
                    <li>{{ enrollment.student.UserName }}
                        <input type="number" name="grade-{{ enrollment.StudentID }}" value="{{ enrollment.Grade or '' }}">
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
        <button type="submit">Submit Grades</button>
    </form>
    <a href="{{ url_for('profile') }}">Back to Profile</a>
    <script>
        document.getElementById('course').addEventListener('change', function() {
            document.querySelectorAll('[id^="course-"]').forEach(function(div) {
                div.style.display = 'none';
            });
            var selectedCourse = 'course-' + this.value;
            document.getElementById(selectedCourse).style.display = 'block';
        });
    </script>
</body>
</html>
